<template>
	<view class="page_wrapper">
		<Navbar title='在线测试' />
		<view class="pagebox">
			<view class="first_row">
				<view class="use_time">
					<view style="padding-bottom: 24rpx;" class="first_title">{{useTimeTxt}}</view>
					<image src="https://www.hzif.cn/mathematics-attach/test_time.png" class="use_time_img"></image>
				</view>
				<view class="current_calc">
					<view class="first_title">{{currentCalcInx + 1}}/{{totalCount}}</view>
					<image src="https://www.hzif.cn/mathematics-attach/test_count.png" class="use_time_img"></image>
				</view>
			</view>

			<view class="first_block">
				<view class="second_row">
					<view>
						{{currentCalc.firstNum}} {{currentCalc.firstCalcType}} {{currentCalc.secondNum}}
						{{currentCalc.secondCalcType}} {{currentCalc.thirdNum}}
					</view>
					<view>=</view>
					<view class="result">
						{{currentResult}}
					</view>
					<view class="center_block">
						<!-- 竖式 -->
						<view class="help_block  my-anim" v-if="helpFlag"
							:class="{'animate__bounce': helpFlag , 'animate__backOutDown': !helpFlag}">
							<view class="help_wrapper" style="display: flex; flex-direction: column;">
								<view style="display: flex; align-items: flex-end;border-bottom: 1px solid #fff;">
									<view class="sign_col">{{currentCalc.firstCalcType}}</view>
									<view class="val_col">
										<view>{{currentCalc.firstNum}}</view>
										<view>{{currentCalc.secondNum}}</view>
									</view>
								</view>
								<view style="display: flex; align-items: flex-end;border-bottom: 1px solid #fff;">
									<view class="sign_col">{{currentCalc.secondCalcType}}</view>
									<view class="val_col">
										<view style="display: flex; margin-top: 10px;">
											<view
												style="width: 17px;height: 17px;border: 1px solid #fff;margin-right: 10px;">
											</view>
											<view
												style="width: 17px;height: 17px;border: 1px solid #fff;margin-right: 10px;">
											</view>
										</view>
										<view>{{currentCalc.thirdNum}}</view>
									</view>
								</view>
								<view style="display: flex;">
									<view class="sign_col"></view>
									<view class="val_col">
										<view style="display: flex; margin-top: 10px;">
											<view
												style="width: 17px;height: 17px;border: 1px solid #e2e2e2;margin-right: 10px;">
											</view>
											<view
												style="width: 17px;height: 17px;border: 1px solid #e2e2e2;margin-right: 10px;">
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<image class="test_bg" src="https://www.hzif.cn/mathematics-attach/test_bg.png" mode=""></image>
			</view>

			<view class="bottom_block">
				<view class="nums_block">
					<view class="left_block">
						<view class="up_block">
							<view class="sub_left_block">
								<view class="key key_btn" @tap="showHelp()">{{helpFlagTxt}}</view>
								<view class="key key_btn pre_calc" @tap="toPreCalc()">上一题</view>
							</view>
							<view class="sub_right_block">
								<view class="sub_num_box">
									<view class="key num" @tap="keyDown('1')">1</view>
									<view class="key num" @tap="keyDown('2')">2</view>
									<view class="key num" @tap="keyDown('3')">3</view>
									<view class="key num" @tap="keyDown('4')">4</view>
									<view class="key num" @tap="keyDown('5')">5</view>
									<view class="key num" @tap="keyDown('6')">6</view>
									<view class="key num" @tap="keyDown('7')">7</view>
									<view class="key num" @tap="keyDown('8')">8</view>
									<view class="key num" @tap="keyDown('9')">9</view>
								</view>
								<view class="down_block">
									<view class="key zero" @tap="keyDown('0')">0</view>
									<view class="key dot" @tap="keyDown('.')">.</view>
								</view>
							</view>
						</view>

					</view>
					<view class="right_block">
						<view class="key key_btn" @tap="keyDown('-1')">退格</view>
						<view class="key_btn next_one" @tap="nextCalc()">下 一 题</view>
					</view>
				</view>
			</view>
		</view>
		<image src="../../static/nimg/bg.png" class="page_bg_img" mode=""></image>
	</view>
</template>

<script>
	import {
		doubleCalc,
		getDoubleScore
	} from '../../utils/create.js'
	import {
		request
	} from '@/utils/request.js'
	import {
		utils
	} from '@/utils/utils.js'
	import Navbar from '@/components/navbar.vue'
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				running: false,
				examId: 0,
				mathExamWinId: 0,
				currentCalcInx: 0,
				calcList: [],
				currentCalc: {},
				totalCount: 0,
				currentResult: '0',
				audioContext: null,
				timer: null,
				useTime: 0,
				useTimeTxt: '00:00',
				helpFlagTxt: '竖式开',
				helpFlag: false,
				isEdit:0,
				usedtime:0,
				isSave:false
			}
		},
		onLoad(option) {
			console.log(option);
			this.isEdit = option.edit || 0
			this.usedtime = option.time || 0
			if(option && option.edit){
				this.examId = option.examId
				request.get("/topicRecordDetail/list",{
					topicRecordId:option.examId,
					page:1,
					limit:60
				}).then(res=>{
					this.transformCalc(res.result.dataList)
				})
			}else{
				this.fetchData()
			}
		},
		onUnload() {
			clearInterval(this.timer)
			if(!this.isSave){
				const data = {
					'useTime': this.useTime,
					'calcList': JSON.stringify(this.calcList),
					'resultImg': '',
					'examType': 'online'
				}
				let arrs = getDoubleScore(data, this.examId,this.isEdit)
				let that = this
				if(this.isEdit!=0){
					request.postJson("/topicRecordDetail/edit",{
						topicRecordId:that.examId,
						score:arrs[0].score,
						details:arrs[1],
						expendTime:Number(arrs[0].useTimeTxt)+that.usedtime,
						accuracy:arrs[0].accuracy,
						status:'1'
					}).then(res=>{
						if(res.code ===200){
							// uni.showToast({
							// 	title:'保存成功',
							// 	icon:'none'
							// })
						}
					})
				}else{
					request.postJson("/topicRecordDetail/save",{
						topicRecordId:that.examId,
						score:arrs[0].score,
						details:arrs[1],
						expendTime:arrs[0].useTimeTxt,
						accuracy:arrs[0].accuracy,
						status:'1'
					}).then(res=>{
						console.log(res);
						if(res.code ===200){
							// uni.showToast({
							// 	title:'保存成功',
							// 	icon:'none'
							// })
						}
					})
				}
			}
			
		},
		watch: {
			useTime(newValue, oldValue) {
				this.useTimeTxt = utils.int2Time(newValue)
			}
		},
		methods: {
			fetchData() {
				let that = this
				uni.showLoading()
				let data = doubleCalc(20, 0, 100, ["+", "-"])
				request.postJson("/topicRecord/create", {
					title: '两次运算-100以内'
				}).then(res => {
					if (res.code === 200 && res.result != null) {
						uni.hideLoading()
						uni.setStorageSync(String(res.result),JSON.stringify(data))
						that.examId = res.result
						that.calcList = data
						that.totalCount = data.length
						that.currentCalc = data[that.currentCalcInx]
						that.timer = setInterval(() => {
							that.useTime++
						}, 1000)
					} else {
						uni.hideLoading()
					}
				})
			},
			showHelp() {
				this.helpFlag = !this.helpFlag
				if (this.helpFlag) {
					// 显示
					this.helpFlagTxt = "竖式关"
				} else {
					// 隐藏
					this.helpFlagTxt = "竖式开"
				}
			},
			toPreCalc() {
				console.log('上一题')
				if (this.currentCalcInx - 1 < 0) {
					uni.showToast({
						icon: 'none',
						title: '已经是第一题了'
					})
					return false
				} else {
					this.currentCalcInx--
					this.currentCalc = this.calcList[this.currentCalcInx]
					this.currentResult = this.currentCalc.myResult
				}
			},
			nextCalc() {
				// 判断结尾是不是有小数点
				const inx = this.currentResult.indexOf('.')
				if (inx >= 0 && inx === (this.currentResult.length - 1)) {
					// 存在. 并且在最后
					this.currentResult = this.currentResult.substring(0, this.currentResult.length - 1)
				}
				// 保存当前答案
				this.calcList[this.currentCalcInx].myResult = this.currentResult
				if (this.currentCalcInx === (this.totalCount - 1)) {
					// 答题结束 保存结果
					uni.showLoading()
					const data = {
						'useTime': this.useTime,
						'calcList': JSON.stringify(this.calcList),
						'resultImg': '',
						'examType': 'online'
					}
					let arrs = getDoubleScore(data, this.examId,this.isEdit)
					if(this.isEdit!=0){
						this.editCalc(arrs,'2')
					}else{
						this.saveCalc(arrs,'2')
					}

				} else {
					this.currentCalcInx++
					this.currentCalc = this.calcList[this.currentCalcInx]
					this.currentResult = '0'
				}
				console.log(this.currentResult)
			},
			keyDown(val) {
				console.log(val)
				this.playClickMusic()
				if (val === '.' && this.currentResult.indexOf('.') >= 0) {
					return false
				}
				if (this.currentResult.indexOf('.') >= 0 && val !== '-1') {
					const startIndex = this.currentResult.indexOf('.')
					const len = this.currentResult.substring(startIndex + 1)
					console.log(len)
					if (len.length >= 2) {
						uni.showToast({
							icon: 'none',
							title: '小数点后最多两位~'
						})
						return false
					}
				}
				if (this.currentResult.length > 5 && val !== '-1') {
					uni.showToast({
						icon: 'none',
						title: '值没有这么大~'
					})
					return false
				}
				if (val === '-1') {
					this.currentResult = this.currentResult.substring(0, this.currentResult.length - 1)
				} else {
					if (this.currentResult === '0' && val !== '.') {
						this.currentResult = val
					} else {
						this.currentResult = this.currentResult + val
					}
				}

				if (this.currentResult.length === 0) {
					this.currentResult = '0'
				}
				console.log(this.currentResult)
			},
			playClickMusic() {
				// const audioContext = uni.createInnerAudioContext()
				// audioContext.autoplay = true
				// audioContext.src = '/static/music/click.mp3'
			},
			editCalc(arrs,type){
				let that = this
				request.postJson("/topicRecordDetail/edit", {
					topicRecordId: that.examId,
					score: arrs[0].score,
					details: arrs[1],
					expendTime: Number(arrs[0].useTimeTxt)+that.usedtime,
					accuracy: arrs[0].accuracy,
					status:type
				}).then(res=>{
					if (res.code === 200) {
						uni.setStorageSync('test_score',JSON.stringify(arrs[0]))
						uni.hideLoading()
						uni.redirectTo({
							url: '/pages/mathCalcTwoOptLogs/onlineFinished/onlineFinished?examId=' +
								that.examId
						})
					}
				})
			},
			saveCalc(arrs,type){
				let that =this
				request.postJson("/topicRecordDetail/save", {
					topicRecordId: that.examId,
					score: arrs[0].score,
					details: arrs[1],
					expendTime: arrs[0].useTimeTxt,
					accuracy: arrs[0].accuracy,
					status:type
				}).then(res => {
					if (res.code === 200) {
						uni.setStorageSync('test_score',JSON.stringify(arrs[0]))
						uni.hideLoading()
						uni.redirectTo({
							url: '/pages/mathCalcTwoOptLogs/onlineFinished/onlineFinished?examId=' +
								that.examId
						})
					}
				})
			},
			transformCalc(data){
				console.log(data);
				let nreg = /[\+\-\*\/\=]+/
				let creg = /[^\+\-\*\/]+/
				if(data && data.length>0){
					data.forEach(item=>{
						const num = item.topic.split(nreg)
						const cas = item.topic.split(creg)
						let obj = {
							firstNum:num[0],
							secondNum:num[1],
							thirdNum:num[2],
							firstCalcType:cas[1],
							secondCalcType:cas[2],
							id:item.id
						}
						if(item.userAnswer!=null){
							obj.myResult = item.userAnswer
							this.currentCalcInx++
						}
						this.calcList.push(obj)
					})
					this.totalCount = this.calcList.length
					this.currentCalc = this.calcList[this.currentCalcInx]
					this.timer = setInterval(() => {
						this.useTime++
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper {
		.first_row {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 30rpx;

			.use_time_img {
				width: inherit;
				height: inherit;
			}

			.first_title {
				position: absolute;
				font-family: 'eryaxinhei';
				font-size: 50rpx;
				padding-left: 60rpx;
				color: #FF4545;
				font-weight: 400;
			}

			.use_time {
				flex: 1;
				width: 384rpx;
				height: 118rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.current_calc {
				flex: 1;
				width: 300rpx;
				height: 93rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.first_block {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-radius: 5px;
			color: white;
			position: relative;

			.test_bg {
				height: 820rpx;
			}

			.second_row {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				font-size: 80rpx;
				font-family: eryaxinhei;

				.result {
					color: #ffffff;
					height: 145rpx;
					width: 312rpx;
					background-color: #328372;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow-x: auto;
				}
			}
		}

		.center_block {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.help_block {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.help_wrapper {
					font-size: 25px;
					padding: 20px 15px 10px 15px;
					display: flex;
					align-items: flex-end;
					justify-content: center;

					.sign_col {
						padding-right: 20px;
					}

					.val_col {
						letter-spacing: 15px;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
					}
				}

			}

			.calc_tips {
				padding: 20px;
				color: #666666;
				font-size: 13px;
			}
		}

		.bottom_block {
			font-family: eryaxinhei;
			padding-top: 20rpx;
			color: #fff;

			.nums_block {
				flex: 1;
				display: flex;
				column-gap: 4rpx;

				.num {
					background-color: #36ac7a;
					border-radius: 10rpx;
					font-size: 66rpx;
					box-shadow: inset 0 0 5rpx 6rpx #56ce9b;
					text-shadow: -4rpx 1rpx 10rpx #00000055;
				}

				.key:active {
					background-color: #2A6C5E;
				}

				.key_btn {
					width: 100%;
					height: 100%;
					background-color: #36ac7a;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: inset 0 0 5rpx 6rpx #56ce9b;
					text-shadow: -4rpx 1rpx 10rpx #00000055;
				}

				.left_block {
					display: flex;
					flex: 0.8;

					.up_block {
						display: flex;
						flex: 1;
						column-gap: 4rpx;

						.sub_left_block {
							flex: 0.25;
							display: grid;
							grid-template-columns: repeat(1, 1fr);
							grid-template-rows: repeat(3, 1fr);
							grid-gap: 4rpx;
							font-size: 40rpx;

							.pre_calc {
								grid-row: span 2;
							}
						}

						.sub_right_block {
							display: flex;
							flex-direction: column;
							row-gap: 4rpx;
							flex: 0.75;
							text-align: center;

							.sub_num_box {
								display: grid;
								grid-template-columns: repeat(3, 1fr);
								grid-gap: 4rpx;
								justify-self: center;
							}
						}

					}

					.down_block {
						display: grid;
						text-align: center;
						justify-self: center;
						grid-template-columns: repeat(3, 1fr);
						grid-gap: 4rpx;
						font-size: 66rpx;

						.zero {
							background-color: #36ac7a;
							border-radius: 10rpx;
							flex: 0.65;
							grid-column: span 2;
							box-shadow: inset 0 0 5rpx 6rpx #56ce9b;
							text-shadow: -4rpx 1rpx 10rpx #00000055;
						}

						.dot {
							flex: 0.35;
							background-color: #36ac7a;
							border-radius: 10rpx;
							line-height: 50rpx;
							box-shadow: inset 0 0 5rpx 6rpx #56ce9b;
							text-shadow: -4rpx 1rpx 10rpx #00000055;
							text-shadow: 0 0 5rpx 5rpx black;
						}
					}

				}

				.right_block {
					flex: 0.2;
					display: grid;
					grid-template-columns: repeat(1, 1fr);
					grid-template-rows: repeat(3, 1fr);
					grid-gap: 4rpx;
					font-size: 40rpx;

					.next_one {
						font-size: 38rpx;
						grid-row: span 2;
						background-color: #ff8835;
						box-shadow: inset 0 0 5rpx 6rpx #ffb030;
						text-shadow: -4rpx 1rpx 10rpx #00000055;
					}
				}

				.next_one:active {
					background-color: #ffb030;
				}

			}
		}
	}
</style>